<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户展示</title>\

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use("table",function () {
        var table = layui.table;
        table.render({
            id:"user",
            elem:"#demo",
            cols:[[
                {type:"checkbox"},
                {field:"userId",title:"用户编号",sort:true},
                {field:"telephone",title:"电话"},
                {field:"userImage",title:"用户照片",templet:"#img"},
                {field:"userNickname",align:"center",title:"昵称"},
                {field:"userName",title:"用户姓名"},
                {field:"sex",title:"性别"},
                {field:"autograph",title:"个性签名"},
                {field:"province",title:"省份"},
                {field:"city",title:"城市"},
                {field:"guru",title:"关注上师",templet:function(d){
                    return d.guru.guruId;
                }},
                {field:"status",align:"center",title:"状态"},
                {field:"createDate",align:"center",title:"创建时间"},
                {title:"操作",
                    toolbar:"#operation"
                }
            ]],
            url:"${pageContext.request.contextPath}/user/showPage",
            page:true,//开启分页
            limits:[5,10,20],//每页条数的选择项
            limit:5,//每页显示的条数，默认是10
            toolbar:"#toolbar"
        });
    })
</script>
<script type="text/html" id="operation">
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="edit">更新</button>
</script>
<script type="text/html" id="img">
    <img src="${pageContext.request.contextPath}{{= d.userImage }}" alt="{{= d.userImage }}">
</script>


<script type="text/html" id="toolbar">
    <button class="layui-btn  layui-btn-sm" onclick="handleOpenAdd()" >
        <i class="layui-icon layui-icon-addition">添加</i>
    </button>
    <div class="layui-inline">
        <form action="" class="layui-form" lay-filter="search">
            <div class="layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">条件</label>
                    <div class="layui-input-block">
                        <select name="option" lay-verify="required">
                            <option value="userName">姓名</option>
                            <option value="telephone">电话</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="search" id="search" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-search"> </i></button>
            </div>
        </form>
    </div>
</script>

<div id="addForm" style="display:none">
    <form class="layui-form" action="" id="add" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">上师姓名</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="guruName" lay-verify="required" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上师昵称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="nickName" lay-verify="required" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上师照片</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传照片
                </button>
                <input type="hidden" class="layui-input" name="guruImage" id="guruImage" lay-verify="required" >
                <span id="fileName"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="add">提交</button>
                <button type="reset" class="layui-btn" >重置</button>
            </div>
        </div>
    </form>
</div>
<div id="updateForm" style="display:none">
    <form class="layui-form" action="" id="update" lay-filter="update">
        <div class="layui-form-item">
            <label class="layui-form-label">上师姓名</label>
            <div class="layui-input-inline">
                <input type="hidden" class="layui-input" name="guruId">
                <input type="text" class="layui-input" name="guruName">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上师照片</label>
            <button type="button" class="layui-btn" id="updateImg">
                <i class="layui-icon">&#xe67c;</i>上传照片
            </button>
            <input type="hidden" class="layui-input" name="guruImage" id="gImage" lay-verify="required" >
            <span id="name"></span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="nickName" lay-verify="required" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="status" lay-verify="required" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="update">提交</button>
                <button type="reset" class="layui-btn" >重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    function handleSearch(){
        layui.use(["form","table"],function(){
            var form = layui.form;
            var table = layui.table;
            var formData = form.val("search");
            var $ = layui.$;
            console.log(formData);

            table.reload("user",{
                url:"${pageContext.request.contextPath}/user/showPage",
                where:{
                    "search":formData.search,
                    "option":formData.option,
                },
                page:{
                    curr:1
                }
            })
            $("#search").val(formData.search);
            $("#option").val(formData.option);
        })
    }

    layui.use(["table","layer","form"],function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.$;

        table.on("tool(test)",function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'edit'){ //编辑

                $.ajax({
                    url:"${pageContext.request.contextPath}/user/updateStatus",
                    data:"id="+obj.data.userId,
                    dataType:"json",
                    success:function(r){
                       if(r.status=="success"){
                           table.reload("user");
                       }else{
                           layer.msg(r.msg);
                       }
                    }
                })
            }
        })
    })
</script>
</body>
</html>